import React, { useEffect, useRef } from 'react';
import useDrawPoint from './useDrawPoint';
import { jsapi, viewUtils } from '@/utils/arcgis';
import { DrawProvider, useDrawStore } from './store';

const drawTree = ({ id = 'tree-layer1' }) => {
  const [createPointGraphic, updatePointGraphic] = useDrawPoint({ id });
  const [drawState, drawDispatch] = useDrawStore();

  useEffect(() => {
    init();

    return () => {
      drawDispatch({
        type: 'remove',
        payload: {
          id,
        },
      });
    };
  }, []);

  async function init() {
    console.log('add')
    drawDispatch({
      type: 'add',
      payload: {
        [id]: updatePointGraphic,
      },
    });
  }

  function handleDrawClick() {
    let symbol = {
      type: 'web-style', // autocasts as new WebStyleSymbol()
      styleName: 'esriRealisticTreesStyle',
      name: 'Other',
      color: '#ff0000',
    };
    placeSymbol(symbol);
  }

  function placeSymbol(symbol) {
    return createPointGraphic(symbol).then(graphic => {
      return placeSymbol(graphic.symbol); // 连续绘制
    });
  }
  return (
    <div
      style={{
        width: 100,
        height: 100,
        position: 'absolute',
        left: '50%',
        top: '30%',
        border: '1px solid red',
        color: '#ffffff',
      }}
    >
      <h1 onClick={handleDrawClick}>create</h1>
    </div>
  );
};

export default drawTree;
